<template>
  <div v-if="userInfo">
    <topNav titleText="编辑资料"></topNav>
    <div class="avatarWrapper">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL+userInfo.head_img"
        class="avatar"
        alt
      />
      <img v-else src="@/assets/logo.png" class="avatar" alt />
      <van-uploader :after-read="uploadAvatar" />
    </div>
    <!-- 组件--横条 -->

    <!-- 昵称 -->
    <navBar labelText="昵称" :descText="userInfo.nickname" @barClick="isShowNickName=true"></navBar>
    <!-- 密码 -->
    <navBar labelText="密码" descText="******" @barClick="isShowPassword=true"></navBar>
    <!-- 性别 -->
    <navBar labelText="性别" :descText="userInfo.gender==1?'男':'女'" @barClick="isShowGender=true"></navBar>

    <!-- 弹出框 -->
    <!-- 弹出框 - 昵称  -->
    <van-dialog
      v-model="isShowNickName"
      title="修改昵称"
      show-cancel-button
      @confirm="editProfile({ nickname:newNickName })"
    >
      <van-field v-model="newNickName" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 弹出框 - 密码  -->
    <van-dialog
      v-model="isShowPassword"
      title="修改密码"
      show-cancel-button
      @confirm="editProfile({ password:newPassword })"
    >
      <van-field v-model="newPassword" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 动作面板 - 性别  -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="genders"
      @select="setGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import topNav from "@/components/topNav";
import navBar from "@/components/navBar";

export default {
  components: {
    topNav: topNav,
    navBar: navBar
  },
  data() {
    return {
      //数据对象
      userInfo: null,
      //昵称
      isShowNickName: false,
      newNickName: "",
      //密码
      isShowPassword: false,
      newPassword: "",
      //性别
      isShowGender: false,
      genders: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 }
      ]
    };
  },
  created() {
    this.loadPage();
  },
  methods: {
    //加载页面
    loadPage() {
      console.log("编辑页");
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        method: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
        const { message, data } = res.data;
        if (message == "获取成功") {
          this.userInfo = data;
          console.log(this.userInfo);
        }
      });
    },
    //修改数据axios
    editProfile(newData) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        data: newData,
        headers: { Authorization: "Bearer " + localStorage.getItem("token") }
      }).then(res => {
        this.loadPage();
        console.log(res);
        console.log("编辑修改完成");
        //修改完毕，刷新数据
      });
    },
    setGender(item) {
      const dataObj = { gender: item.gender };
      this.editProfile(dataObj);
      this.isShowGender = false;
    },
    //文件上传事件
    uploadAvatar(fileObj) {
      //接受文件对象的参数
      var formData = new FormData();
      formData.append("file", fileObj.file);
      //发axios请求
      this.$axios({
        url: "/upload",
        method: "post",
        data: formData
      }).then(res => {
        console.log(res.data);
        const { message, data } = res.data;
        if (message == "文件上传成功") {
          //修改文件头像
          this.editProfile({
            head_img: data.url
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.avatarWrapper {
  height: 38.889vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .avatar {
    width: 19.444vw;
    height: 19.444vw;
    border-radius: 50%;
  }
  .van-uploader {
    position: absolute;
    opacity: 0;
  }
}
</style>